// import React from 'react'
// import styles from './components/style.less'
// import Hellos from './components/Hellos.js'
// function Son(){
//     return <div className={styles.box}>
//         我是子组件
//     </div>
// }
// function Son1(){
//     return <div style={{width:'100px',height:'100px',backgroundColor:'red'}}>
//         我是子组件2
//     </div>
// }
// function Father(props){
//     return<div className={styles.box1}>
//         我是父组件
//         {props.children}
//     </div>
// }
// // const fun = ()=>{
// //    console.log(123);
// // }
// const text = "我是props传过来的值"

// export default function LayOut() {
//     return (
//         <div>
//            <Father>
//                 <Son/>
//                 <Son1/>   
//             </Father>
//             <hr/>
//             <Hellos aa={text}/>
//         </div>
//     )
// }
// import React,{useState} from 'react'
// import Hello from './components/Hello.jsx'
// import Tab from './components/Tab.jsx'
// export default function LayOut() {
//     const [userInfo,setInfo] = useState({
//         title:"我是传过来的值1",
//         username:"我是传过来的值2",
//         com:{
//             id:1,
//             text:"我是对象"
//         }
//     })
//     function fun(){
//          setInfo({
//              title:"我被改了",
//              username:"我记"
//          })
//     }
//     return (
//         <div>
//             <Hello userInfo={userInfo}/>
//             <Tab userInfo={userInfo}/>
//             <button onClick={fun}>点击修改</button>
//         </div>
//     )
// }
//子传父-------------------------------------------------
// import React,{useState} from 'react'
// import Hello from './components/Hello.jsx'
// import Tab from './components/Tab.jsx'
// export default function LayOut() {
//     const [userInfo,setInfo] = useState("我是原本的数据")
//     function add(val){
//          setInfo(val) //val代表的是子传过来的值
//     }

//     return (
//         <div>
//             <Hello/>
//             <Tab add={add}/>
//             {userInfo}
//         </div>
//     )
// }
//跨组件--------------------------------------------------
// import React, {useState}from 'react'
// import Father from './components/Father.jsx'
// //引入中间人文件夹
// import {moneyContext} from './context/index.jsx'
// export default function LayOut() {
//     const [money] = useState('我是爷爷传过来的数据')
//     return (
//         
//             <moneyContext.Provider value={money}>
//                 我是爷爷级
//             	<Father/>
//             </moneyContext.Provider>
//         
//     )
// }
//动画和生命周期----------------------------------------------
// import React, { Component } from 'react'
// import {CSSTransition} from 'react-transition-group'
// import 'animate.css'
// export default class LayOut extends Component {
//     state={
//         flage:false,
//         arr:[]
//     }
//      fun1= ()=>{
//         this.setState({
//             flage:!this.state.flage
//         })
//         console.log(this.state.flage);
//     }
//     render() {
//         const {flage,arr} = this.state
//         return (
//             <div>
//                 <button onClick={this.fun1}>点击</button>
//                 <CSSTransition
//                  in={flage}
//                  classNames={{
//                      enter:'animate__animated',
//                      enterActive:'animate__slideInLeft',
//                      exit:'animate__animated',
//                      exitActive:'animate__slideOutLeft'
//                  }}
//                  timeout={6000}
//                  unmountOnExit
//                  >
//                      <h1>动画内容</h1>
//                  </CSSTransition>
//                  <ul>
//                      {arr.map(item=><li key={item.id}>{item.commentTxt}</li>)}
//                  </ul>
//             </div>
//         )
//     }
//     componentDidMount(){
//         fetch('http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187')
//         .then(res => res.json())
//         .then(data =>{
//             console.log(data.data);
//             this.setState({
//                 arr:data.data.commentList
//             })
//         }).catch(error=>Promise.reject(error))
//     }
// }
// this.gorceUpdate()------------------------------------------
import React, { Component } from 'react'

export default class LayOut extends Component {
    username = '张三'
    changeusername=()=>{
        this.username = '李四'
        this.forceUpdate()
    }
    render() {
        return (
            <div>
                <button onClick={this.changeusername}>点击修改</button>
                <p>{this.username}</p>
            </div>
        )
    }
}
